<template>
  <div>
    <span>全选:</span>
    <input v-model="isAll" type="checkbox"/>
    <button @click="fan">反选</button>
    <ul>
      <li v-for="(item,index) in arr" :key="index">
        <input v-model="item.c" type="checkbox"/>
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
methods:{
  fan(){
    this.arr.forEach(item=>{
      return item.c=!item.c
    })
  }
},
  computed:{
isAll:{
  set(val){
this.arr.forEach(item=>{
  return item.c=val
})
  },
  get(){
 return this.arr.every((item)=>{
      return item.c
    })
  }
}
  }
};
</script>